import React, { useEffect, useState } from "react";
import { Descriptions, Card, Button } from "antd";
import { useNavigate, useParams } from "react-router-dom";

import {getHospitalListIdRequest} from "@api/hospital/hospitalList"

import type {
  getHospitalListIdReqReturn
} from "@api/hospital/model/hospitalListType"

export default function HospitalShow() {
  //返回按钮跳转
  const navigate = useNavigate()

  //useParams拿到id
  const { id } = useParams()

  //定义状态保存id请求回来的当前医院数据
  const [hospital , setHospital] = useState<getHospitalListIdReqReturn>({})

  
  //1.初始化根据id请求对应的医院详情信息
  useEffect(() => {
    (async() => {
      const result = await getHospitalListIdRequest(id as string)

      //把请求回来的数据保存在状态中
      setHospital(result)

    })()
  }, [])


  //2.点击返回的回调
  const goBackHandle = () => {
    navigate(-1)
  }

  
  return (
    <div>
      <Card>

        {/* 
            因为请求回来的数据上的两个属性(hospital bookingRule) 是可选的 所以读取的时候有可能为undefined
            并且这个属性的读取是在请求数据回来之前是同步的 导致属性有可能读取不到
            所以给这个属性添加可选链操作符如果没有就不执行后续代码 读取到了才执行 可以避免报错
        */}
        <Descriptions title="基本信息" bordered column={2}>

          <Descriptions.Item label="医院名称" style={{ textAlign: 'center' }}>
            {hospital.hospital?.hosname}
          </Descriptions.Item>

          <Descriptions.Item label="医院logo" style={{ textAlign: 'center' }}>
            {
              (hospital.hospital?.logoData) ? 
              (<img width={140} src={`data:image/jpeg;base64,${hospital.hospital?.logoData}`} alt="" />)
              : ""
            }
          </Descriptions.Item>

          <Descriptions.Item label="医院编码" style={{ textAlign: 'center' }}>
            {hospital.hospital?.hoscode}
          </Descriptions.Item>

          <Descriptions.Item label="医院地址" style={{ textAlign: 'center' }}>
            {hospital.hospital?.param.fullAddress}
          </Descriptions.Item>

          <Descriptions.Item label="坐车路线" span={2}>
            {hospital.hospital?.route}
          </Descriptions.Item>

          <Descriptions.Item label="医院简介" span={2}>
            {hospital.hospital?.intro}
          </Descriptions.Item>
        </Descriptions>


        <Descriptions title="预约规则信息" bordered column={2} style={{ marginTop: 30 }}>

          <Descriptions.Item label="预约周期" style={{ textAlign: 'center' }}>
            {hospital.bookingRule?.cycle}
          </Descriptions.Item>

          <Descriptions.Item label="放号时间" style={{ textAlign: 'center' }}>
            {hospital.bookingRule?.releaseTime}
          </Descriptions.Item>

          <Descriptions.Item label="停挂时间" style={{ textAlign: 'center' }}>
            {hospital.bookingRule?.stopTime}
          </Descriptions.Item>

          <Descriptions.Item label="退号时间" style={{ textAlign: 'center' }}>
            {hospital.bookingRule?.quitTime}
          </Descriptions.Item>

          <Descriptions.Item label="预约规则" span={2} >
            {hospital.bookingRule?.rule.map((item , index) => { 
              return <p key={index}>{item}</p>
            })}
          </Descriptions.Item>

        </Descriptions>


        <Button style={{ marginTop: 30 }} onClick = {goBackHandle}>返回</Button>

      </Card>
    </div>
  )
}
